<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="/client/header::header(null,null)"/>
<body>
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">


        <!-- 文章遍历并分页展示 : 需要同学们手动完成，基本样式已经给出，请使用th标签及表达式完成页面展示 -->

        <div th:each="data:${articles}">

            <article class="am-g blog-entry-article">

                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color" style="font-size: 15px;"><a th:text="${data.categories}">默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" th:text="'发布于 '+${data.created}"/>
                    <h2>
                        <!-- 文章标题 -->
                        <div><a style="color: #0f9ae0;font-size: 20px;" th:text="${data.title}"/>
                        </div>
                    </h2>
                    <!-- 文章内容-->
                    <div style="font-size: 16px;" th:text="${data.content}"/>
                </div>
            </article>
        </div>
        <div class="modal-footer no-margin-top">
            <ul class="pagination pull-right no-margin">
                <!-- 首页 -->
                <li>
                    <a th:href="'/article/pageArticle?pageNum=1&pageSize=2'">首页</a>
                </li>

                <!-- 上一页 -->
                <li>
                    <a th:href='@{/article/pageArticle(pageNum=${beforeNum},pageSize=2)}' th:text="上一页"></a>
                </li>
                <!-- 下一页 -->
               <li>
                    <a th:href='@{/article/pageArticle(pageNum= ${afterNum},pageSize=2)}' th:text="下一页"></a>
                </li>
                <!-- 尾页 -->
                <li>
                    <a th:href='@{/article/pageArticle(pageNum=${totalPage},pageSize=2)}'>尾页</a>
                </li>


            </ul>
        </div>
    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>子慕</span></h2>
            <img th:src="@{/assets/img/me.jpg}" alt="about me" class="blog-entry-img"/>
            <p>
                Java后台开发
            </p>
            <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p>
                <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>

</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="/client/footer::footer"/>
<script type="application/javascript">

    //js 实现
    var pageSize=0;
    var pageNum=1;
  /* $(document).ready(function () {
       pageSize=$("#pageSize").val();
       pageNum= $("#pageNum").val();
       init();
   });*/
   /* $("#before").on({"click":function () {
       if($("#pageNum")>0){
           pageNum=parseInt($("#pageNum").val())-1;
           $("#pageNumber").val(pageNum);
       }
       pageSize=$("#pageSize").val();
       init();
   }});
    $("#next").on({"click":function(){
        if(pageNum<$("#totalPage").val()){
            pageNum=parseInt($("#pageNum").val())+1;
            $("#pageNum").val(pageNum);
            pageSize=$("#pageSize").val();
            init();
        }else{
            alert("没有更多数据了！");
        }
   }});
    $("#back").on({"click":function(){
            pageNum=1;
            $("#pageNum").val(pageNum);
            pageSize=$("#pageSize").val();
            init();
    }})
   function init() {
       var data={"pageNum":pageNum,"pageSize":pageSize};
       $.ajax({
           url:"/article/pageArticle",
           dataType:"json",
           data:data,
           type:"POST",
           success:function (msg) {
               if(!$("#totalPage").val() || $("#totalPage").val()!=msg.total) {
                   $("#totalPage").val((parseInt(msg.total)+parseInt(pageSize)-1) / pageSize);
                   console.log(msg);
               }
           },
           error:function(msg){

           }
       })
   }*/

</script>
</html>
